require.config({
  baseUrl: "javascripts/library", // 基础路径
  paths: {
    jquery: "jquery",
    axios: "axios",
  },
  // shim用于管理第三方插件的依赖
  shim: {},
});


require(['axios','jquery'],function(axios,$){

  let id = location.search.split("=")[1];
  // console.log(id);
  axios.get('./product/getitem',{ params:{id}}).then(res=>{
    let data = res.data[0];

    let pic = JSON.parse(data.picture);
    console.log(pic);
    console.log(res.data);
    let template = `<div class="main-top-l">
    <img src="./images/details-1.webp" alt="">
    <div class="mask"></div>
    <div class="big"><img src="./images/big-box.webp" alt="" class="bigImg"></div>
    <div class="main-top-b">
      <ul>
        <li><img src="./${pic[1].src}" alt=""></li>
        <li><img src="./images/box8.2.webp" alt=""></li>
        <li><img src="./images/box8-3.2.webp" alt=""></li>
        <li><img src="./images/box8.2.webp" alt=""></li>
        <li><img src="./images/box2.2.webp" alt=""></li>
        <li><img src="./images/box8.2.webp" alt=""></li>
        <li><img src="./images/box2.2.webp" alt=""></li>
        <li><img src="./images/box8.2.webp" alt=""></li>
      </ul>
      <span>&lt;</span>
      <span>&gt;</span>
    </div>
    <div class="main-top-text">
      <ul>
        <li><img src="./images/gou.png" alt="">360商城发货&售后</li>
        <li><img src="./images/gou.png" alt="">满99元包邮</li>
        <li><img src="./images/gou.png" alt="">7天无理由退货</li>
        <li><img src="./images/gou.png" alt="">15天免费换货</li>
      </ul>
    </div>
  </div>`;


  
  $('.main-top-l').html(template);

  //渲染主题右边
  let template_1=`<div class="main-top-r">
          <p>${data.title}</p>
          <p>2K超清画质 166°超广视角</p>
          <div>
            <!-- 价格 -->
            <div class="price">
              <span>价格</span>
              <span>￥${data.price}</span>
              <span>￥429</span>
            </div>
            <!-- 领劵 -->
            <div class="juan">
              <span>领劵</span>
              <span>满99.00减5.00元</span>
            </div>
            <!-- 促销 -->
            <div class="cu">
              <span>促销</span>
              <span>直降</span>
              <span>立减30.00元</span>
            </div>
          </div>
          <div>
            受疫情影响，北京、上海、黑龙江、吉林、辽宁、河北、江西、江苏、四川、甘肃、青海、新疆、宁夏回族自治区等部分地区暂缓发货。
          </div>
          <div>
            <!-- 分类 -->
            <div class="classify">
              <span>分类</span>
              <ul>
                <li class="active">AR1C</li>
                <li>AR2CCM02</li>
                <li>P4PRO-1L43</li>
              </ul>
            </div>
            <!-- 数量 -->
            <div class="count">
              <span>数量</span>
              <a href="">-</a>
              <input type="text" value="1">
              <a href="">+</a>
            </div>
            <!-- 积分 -->
            <div class="integral">
              <span>积分</span>
              <span>购买可获得399积分 <a href=""></a></span>
            </div>
            <!-- 按钮 -->
            <div class="btn">
              <a href="">立即购买</a>
              <a href="">加入购物车</a>
              <a href=""></a>
            </div>
          </div>
        </div>
`;
$('.main-top-r').html(template_1);


  $("#main .main-top-b img").on("mouseenter", function () {
    let src = $(this).attr("src");
    $("#main .main-top-l>img").attr("src", src);
  });

  // 点击按钮偏移
  let sum = 0;
  $("#main .main-top-b>span:nth-of-type(1)").on("click", function () {
    if(sum>0) $("#main .main-top-b>ul").scrollLeft((sum -= 90));

  });
  $("#main .main-top-b>span:nth-of-type(2)").on("click", function () {
   if(sum<270)  $("#main .main-top-b>ul").scrollLeft((sum += 90));

  });


  let main = document.querySelector(".main-top-l");
  let mask = document.querySelector(".mask");
  let big = document.querySelector(".big");

  // 当鼠标经过
  main.addEventListener("mouseover", function () {
    mask.style.display = "block";
    big.style.display = "block";
  });
  // 当鼠标离开
  main.addEventListener("mouseout", function () {
    mask.style.display = "none";
    big.style.display = "none";
  });
  // 当鼠标移动
  main.addEventListener("mousemove", function (e) {
    let x = e.pageX - this.offsetLeft;
    let y = e.pageY - this.offsetTop;

    let maskX = x - mask.offsetWidth / 2;
    let maskY = y - mask.offsetHeight / 2;

    if (maskX <= 0) {
      maskX = 0;
    } else if (maskX >= main.offsetWidth - mask.offsetWidth) {
      maskX = main.offsetWidth - mask.offsetWidth;
    }

    if(maskY <= 0){
      maskY = 0;
    }else if(maskY >=180){
      maskY = 180;
    }
    mask.style.left = maskX + "px";
    mask.style.top = maskY + "px";

    // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大的移动距离
    let  maskMax = main.offsetTop - mask.offsetTop;
    let bigImg = document.querySelector(".bigImg");

    let bigMax = bigImg.offsetWidth - big.offsetWidth;

    let bigX = maskX * bigMax / maskMax;
    let bigY = maskX * bigMax / maskMax;
    bigImg.style.left = -bigX + "px";
    bigImg.style.top = -bigY + "px";

  });
  })
  .catch((err)=>{ 
    console.log(err); 
  });
});

